<template>
  <div class="container">
    <!-- 把搜索组件加载进来 -->
    <!-- <Search></Search> -->
    <Search></Search>
    <!-- 把面板和轮播图加载进来 -->
    <HomeNav></HomeNav>
    <!-- 商品显示区域 -->
    <div class="content">
      <!-- 秒杀 -->
      <div class="seckill">
        <!-- 头部 -->
        <div class="seckill-head">
          <div class="seckill-icon">
            <img src="../assets/img/seck/clock.png" />
          </div>
          <div class="seckill-text">
            <span class="seckill-title">热销图书</span>
            <span class="seckill-remarks">总有你想不到的精彩</span>
          </div>
          <div class="count-down">
            <span class="count-down-text">当前场次</span>
            <span class="count-down-num count-down-hour">13</span>
            <span class="count-down-point">:</span>
            <span class="count-down-num count-down-minute">14</span>
            <span class="count-down-point">:</span>
            <span class="count-down-num count-down-seconds">15</span>
            <span class="count-down-text">后结束抢购</span>
          </div>
        </div>
        <!-- 内容 -->
        <div class="seckill-content">
          <div class="seckill-item" v-for="(item, index) in hotbooklist" :key="index">
            <div class="seckill-item-img">
              <router-link :to="'/gooddetail/'+item.bookid">
                <img :src="item.bookImg" />
              </router-link>
            </div>
            <div class="seckill-item-info">
              <p>{{item.bookname}}</p>
              <p>{{item.author}}</p>
              <p>
                <span class="seckill-price text-danger">
                  <!-- <Icon type="logo-usd"></Icon> -->
                  ￥{{item.price}}
                </span>
                <span class="seckill-old-price"> 
                  <s>
                     <!-- <Icon type="logo-usd"></Icon> -->
                    ￥{{item.oldprice}}
                  </s>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="djtg">
         <h1 class="dj">独</h1>
      <h1 >家提供</h1>
      </div>
     
      <Tabs v-model="value" type="card" class="tabs">
        
         <TabPane label="成功励志" name="3">
          <threshold-table :getClick="value">
            <CateBook4></CateBook4>
          </threshold-table>
        </TabPane>
        <TabPane label="文学小说" name="1">
          <warning-select :getClick="value">
            <CateBook2></CateBook2>
          </warning-select>
        </TabPane>
        <TabPane label="童书" name="2">
          <threshold-table :getClick="value">
            <CateBook3></CateBook3>
          </threshold-table>
        </TabPane>
       <TabPane label="四大名著" name="0">
          <pending-table>
            <CateBook></CateBook>
          </pending-table>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import HomeNav from "./nav/HomeNav";
import Search from "./Search";
import CateBook from "./catebook/CateBook";
import CateBook2 from "./catebook/CateBook2";
import CateBook3 from "./catebook/CateBook3";
import CateBook4 from "./catebook/CateBook4";

import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "Home",
  created() {
    this.getHotBookList();
    this.getCategory();
  },
  mounted() {},
  data() {
    return {
      value:'',
      // 根据两个条件查询：是否热销和是否上架
      queryInfo: {
        hot_sell: 2,
        is_sell: 1
      },
      setIntervalObj: null,
      hotbooklist: [],
      bookcate: []
    };
  },
  methods: {
    async getHotBookList() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/admin/goodList/hotsell",
        {
          params: this.queryInfo
        }
      );
      this.hotbooklist = res.data;
    },
    async getCategory() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/admin/bookCate",
        {
          // params: this.queryInfo
        }
      );
      this.bookcate = res.data;
      console.log(res.data);
    },
    get1(id) {
      console.log(id);
      this.$router.push({
        path: "/catebook",
        query: {
          cateid: id
        }
      });
    }
  },
  computed: {
    // ...mapState([ 'seckills', 'computer', 'eat' ]),
    // ...mapGetters([ 'seckillsHours', 'seckillsMinutes', 'seckillsSeconds' ])
  },
  components: {
    // Search,
    HomeNav,
    Search,
    CateBook,
    CateBook2,
    CateBook3,
    CateBook4
  },
  destroyed() {
    clearInterval(this.setIntervalObj);
  }
  // store
};
</script>

<style scoped>
.container {
  background-color: #f6f6f6;
}
.content {
  width: 1008px;
  margin: 0px auto;
}
/*****************************秒杀专栏开始*****************************/
/*秒杀专栏*/
.seckill {
  width: 100%;
  height: 330px;
  margin: 15px auto;
  background-color: #fff;
}
.seckill-head {
  width: 100%;
  height: 50px;
  background-color: #e01222;
}
.seckill-icon {
  width: 68px;
  height: 100%;
  float: left;
}
.seckill-icon img {
  width: 35px;
  height: 35px;
  margin-top: 6px;
  margin-left: 15px;
  animation-name: shake-clock;
  animation-duration: 0.3s;
  animation-iteration-count: infinite; /*设置无线循环*/
}
/*定义闹钟震动动画关键帧*/
@keyframes shake-clock {
  0% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}
.seckill-text {
  width: 300px;
  height: 100%;
  float: left;
}
.seckill-text .seckill-title {
  font-size: 22px;
  line-height: 50px;
  color: #fff;
}
.seckill-text .seckill-remarks {
  margin-left: 5px;
  font-size: 10px;
  color: #fff;
}
/*倒计时*/
.count-down {
  height: 100%;
  margin-right: 30px;
  line-height: 50px;
  float: right;
}
.count-down-text {
  color: #fff;
}
.count-down-num {
  padding: 3px;
  border-radius: 5px;
  background-color: #440106;
  font-size: 26px;
  font-weight: bold;
  color: #f90013;
}
.count-down-point {
  font-size: 26px;
  font-weight: bold;
  color: #440106;
}
/* 内容的容器 */
.seckill-content {
  width: 100%;
  height: 280px;
  overflow: hidden;
}
.seckill-item {
  width: 183px;
  height: 250px;
  margin-top: 15px;
  margin-left: 15px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
  float: left;
}
.seckill-item-img {
  width: 160px;
  height: 160px;
  margin: 0px auto;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.seckill-item-img img {
  width: 130px;
  height: 130px;
  margin-left: 15px;
  margin-top: 15px;
  /* transition: margin-top 0.3s; */
  transition: 0.3s linear;
}
.seckill-item-img:hover img {
  /* margin-top: 6px; */
  /* transition: margin-top 0.3s; */
  transform: scale(1.1);
}
.seckill-item-info {
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px;
  color: #009688;
}
.seckill-item-info p:first-child{
  /* padding: 5px; */
  /* padding-left: 15px; */
  padding-right: 15px;
  font-size: 18px;
  color: black;
}
.seckill-item-info p:nth-child(2){
  /* padding: 5px; */
  /* padding-left: 15px; */
  padding-right: 15px;
  font-size: 10px;
  color: gray;
}
.seckill-item-info span:nth-child(1){
  /* padding: 5px; */
  /* padding-left: 15px; */
  /* padding-right: 15px; */
  font-size: 15px;
  color:#cc3300;
  font-family: Arial;

}
.seckill-item-info span:nth-child(2){
  /* padding: 5px; */
  /* padding-left: 15px; */
  padding-right: 15px;
  font-size: 15 px;
  color: #aaa;
  font-family: Arial;
}
.seckill-item-info i:first-child {
  font-size: 14px;
}
.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
/*****************************秒杀专栏结束*****************************/

/*****************************商品专栏开始*****************************/
.item-class {
  width: 100%;
  height: 470px;
  margin-top: 15px;
  background-color: #fff;
}
.item-class-head {
  width: 100%;
  height: 50px;
  background-color: #4488a7;
}
.item-class-eat-head {
  background-color: #ecb226;
}
.item-class-head ul {
  list-style: none;
  float: right;
  margin-right: 30px;
  line-height: 50px;
}
.item-class-head a {
  padding: 6px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6da6be;
  border: 1px solid #6da6be;
  text-decoration: none;
  color: #fff;
}
.item-class-eat-head a {
  background-color: #eeb955;
  border: 1px solid #eeb955;
}
.item-class-head a:hover {
  border: 1px solid #fff;
}
.item-class-head li {
  float: left;
}
.item-class-title {
  font-size: 25px;
  line-height: 50px;
  color: #fff;
  margin-left: 15px;
}
.item-class-content {
  width: 49%;
  cursor: pointer;
  border-right: 1px solid #ccc;
  margin-left: 0.9%;
  /*background-color: #cff;*/
  float: left;
}
.item-class-content:nth-child(odd) {
  border: none;
}
.item-content-top {
  width: 100%;
  height: 260px;
}
.item-big-img {
  width: 180px;
  height: 260px;
  overflow: hidden;
  float: left;
}
.item-big-img img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}
.item-big-img:hover img {
  margin-left: -15px;
  transition: margin-left 0.3s;
}
.item-four-img {
  width: 303px;
  margin-left: 8px;
  float: left;
}
.item-four-detail img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}
.item-four-detail:hover img {
  margin-left: -6px;
  transition: margin-left 0.3s;
}
.item-four-detail {
  width: 152px;
  height: 130px;
  margin-left: -1px;
  float: left;
}
.item-four-detail:first-child {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.item-four-detail:last-child {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.item-four-detail-text {
  width: 50px;
  margin-left: 5px;
  margin-top: 15px;
  float: left;
}
.item-four-detail-img {
  width: 96px;
  margin-top: 15px;
  overflow: hidden;
  float: left;
}
.item-four-detail-img img {
  margin-left: 5px;
  width: 90px;
}
.pt_bi_tit {
  font-weight: bold;
  font-size: 12px;
  color: #4488a7;
}
.pt_bi_tit-eat {
  color: #ecb127;
}
.pt_bi_promo {
  color: #00695c;
}
.item-content-bottom {
  width: 100%;
  margin-top: 8px;
}
.item-content-bottom-img {
  width: 156px;
  margin-right: 8px;
  overflow: hidden;
  float: left;
}
.item-content-bottom-img img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}
.item-content-bottom-img:hover img {
  margin-left: -15px;
  transition: margin-left 0.3s;
}

.list {
  background-color: white;
}

.catelist {
  padding: 25px;
  height: 40px;
}

.catelist li {
  float: left;
  margin-right: 100px;
  cursor: pointer;
}
/*****************************商品专栏结束*****************************/
/* 控制分类栏的高度、颜色、边距 */
.tabs {
  height:330px;
  margin-top: -30px;
  background-color: white;
}
.ivu-tabs-nav-container {
  font-size: 18px !important;
  color: red;
}

.eltab{
  height: 1000px;
}
.djtg h1:nth-child(2){
  /* float: left; */
  color:green;
  position: relative;
  top: -45px;
  left: 60px;
}
.dj{
   width: 50px;
   height: 50px;
   background-color: green;
   color: white;
   line-height: 50px;
   text-align: center;
   border-radius: 50px;
   font-size: 25px;
}
</style>
